<!-- 地址参数功能测试页面 -->
<template>
  <view class="min-h-screen bg-gray-50 p-6">
    <!-- 页面标题 -->
    <view class="mb-8">
      <text class="text-[36rpx] font-bold text-gray-900 text-center">地址参数功能测试</text>
    </view>

    <!-- 功能说明 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">功能说明</view>
      <view class="space-y-3 text-[24rpx] text-gray-700">
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            1
          </view>
          <text class="flex-1">全国：直接传"全国"</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            2
          </view>
          <text class="flex-1">省级：直接传省份名称（如：河北省）</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            3
          </view>
          <text class="flex-1">市级：省-市格式（如：河北省-沧州市）</text>
        </view>
      </view>
    </view>

    <!-- 模拟发布页面 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">模拟发布页面</view>
      
      <!-- 区域选择 -->
      <view class="mb-6">
        <text class="text-[28rpx] font-medium text-gray-800 mb-3 block">区域选择</text>
        <nut-radio-group v-model="testRegionLevel" direction="horizontal">
          <nut-radio label="nation" class="mr-6">全国</nut-radio>
          <nut-radio label="province" class="mr-6">省级</nut-radio>
          <nut-radio label="city">市级</nut-radio>
        </nut-radio-group>
      </view>

      <!-- 城市选择器 -->
      <view v-if="testRegionLevel !== 'nation'" class="mb-6">
        <text class="text-[28rpx] font-medium text-gray-800 mb-3 block">服务区域</text>
        <CityPicker
          :mode="testRegionLevel === 'city' ? 'city' : 'province'"
          :placeholder="getPlaceholder()"
          :title="getTitle()"
          :disabled="false"
          @confirm="handleRegionConfirm"
          @cancel="handleRegionCancel"
        />
      </view>

      <!-- 显示选择结果 -->
      <view v-if="testRegion" class="mb-6 p-4 bg-blue-50 rounded-xl border border-blue-200">
        <view class="flex items-center mb-2">
          <IconFont name="check-circle" class="text-blue-600 mr-2" size="24rpx" />
          <text class="text-[24rpx] text-blue-600 font-medium">已选择区域：</text>
        </view>
        <view class="text-[26rpx] text-blue-800">
          <text v-if="testRegion.province" class="block">
            省份：{{ testRegion.province.name }} ({{ testRegion.province.code }})
          </text>
          <text v-if="testRegion.city" class="block">
            城市：{{ testRegion.city.name }} ({{ testRegion.city.code }})
          </text>
        </view>
      </view>

      <!-- 全国范围显示 -->
      <view v-if="testRegionLevel === 'nation'" class="mb-6 p-4 bg-green-50 rounded-xl border border-green-200">
        <view class="flex items-center">
          <IconFont name="check-circle" class="text-green-600 mr-2" size="24rpx" />
          <text class="text-[24rpx] text-green-600 font-medium">服务范围：全国</text>
        </view>
      </view>

      <!-- 测试按钮 -->
      <view class="flex gap-4">
        <nut-button
          type="primary"
          size="large"
          class="flex-1"
          @click="testAddressParam"
        >
          测试地址参数
        </nut-button>
        
        <nut-button
          type="default"
          size="large"
          class="flex-1"
          @click="resetTest"
        >
          重置测试
        </nut-button>
      </view>
    </view>

    <!-- 地址参数结果 -->
    <view v-if="addressResults.length > 0" class="bg-white rounded-2xl p-6 shadow-sm">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">地址参数结果</view>
      <view class="space-y-4">
        <view 
          v-for="(result, index) in addressResults" 
          :key="index"
          class="border border-gray-200 rounded-xl p-4"
        >
          <view class="flex items-center justify-between mb-2">
            <text class="text-[28rpx] font-medium text-gray-800">测试 {{ index + 1 }}</text>
            <text class="text-[24rpx] text-gray-500">{{ result.timestamp }}</text>
          </view>
          
          <view class="space-y-2">
            <view class="flex items-start">
              <text class="text-[24rpx] text-gray-600 w-[120rpx] flex-shrink-0">区域级别：</text>
              <text class="text-[24rpx] text-blue-600">{{ result.regionLevel }}</text>
            </view>
            
            <view class="flex items-start">
              <text class="text-[24rpx] text-gray-600 w-[120rpx] flex-shrink-0">选择区域：</text>
              <text class="text-[24rpx] text-blue-600">{{ result.selectedRegion || '无' }}</text>
            </view>
            
            <view class="flex items-start">
              <text class="text-[24rpx] text-gray-600 w-[120rpx] flex-shrink-0">地址参数：</text>
              <text class="text-[24rpx] text-green-600 font-medium">{{ result.addressParam }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import CityPicker from './CityPicker.vue'

/**
 * 选择结果类型定义
 */
interface SelectionResult {
  province?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
  city?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
}

/**
 * 地址参数结果类型
 */
interface AddressResult {
  regionLevel: string
  selectedRegion?: string
  addressParam: string
  timestamp: string
}

// 响应式数据
const testRegionLevel = ref('city')
const testRegion = ref<SelectionResult | null>(null)
const addressResults = ref<AddressResult[]>([])

/**
 * 获取占位符文本
 */
const getPlaceholder = () => {
  switch (testRegionLevel.value) {
    case 'city':
      return "请选择服务区域（省市）"
    case 'province':
      return "请选择服务区域（省份）"
    default:
      return "请选择服务区域"
  }
}

/**
 * 获取标题文本
 */
const getTitle = () => {
  switch (testRegionLevel.value) {
    case 'city':
      return "选择服务区域（省市）"
    case 'province':
      return "选择服务区域（省份）"
    default:
      return "选择服务区域"
  }
}

/**
 * 构建地址参数（与发布页面逻辑一致）
 */
const buildAddressParam = () => {
  switch (testRegionLevel.value) {
    case 'nation':
      return '全国'
    case 'province':
      // 省级：直接传省份名称
      if (testRegion.value?.province) {
        return testRegion.value.province.name
      }
      return '未选择省份'
    case 'city':
      // 市级：省-市格式
      if (testRegion.value?.province && testRegion.value?.city) {
        return `${testRegion.value.province.name}-${testRegion.value.city.name}`
      } else if (testRegion.value?.province) {
        return testRegion.value.province.name
      }
      return '未选择区域'
    default:
      return '未选择区域'
  }
}

/**
 * 处理市区选择确认
 */
const handleRegionConfirm = (result: SelectionResult) => {
  testRegion.value = result
  
  let message = ''
  if (result.city) {
    message = `已选择：${result.province?.name} ${result.city.name}`
  } else if (result.province) {
    message = `已选择：${result.province.name}`
  }
  
  if (message) {
    Taro.showToast({
      title: message,
      icon: 'success',
      duration: 2000
    })
  }
}

/**
 * 处理市区选择取消
 */
const handleRegionCancel = () => {
  Taro.showToast({
    title: '已取消选择',
    icon: 'none',
    duration: 1500
  })
}

/**
 * 测试地址参数
 */
const testAddressParam = () => {
  const addressParam = buildAddressParam()
  
  // 构建选择区域描述
  let selectedRegionDesc = ''
  if (testRegionLevel.value === 'nation') {
    selectedRegionDesc = '全国'
  } else if (testRegion.value) {
    if (testRegion.value.city) {
      selectedRegionDesc = `${testRegion.value.province?.name} ${testRegion.value.city.name}`
    } else if (testRegion.value.province) {
      selectedRegionDesc = testRegion.value.province.name
    } else {
      selectedRegionDesc = '未选择'
    }
  } else {
    selectedRegionDesc = '未选择'
  }
  
  // 添加测试结果
  addressResults.value.unshift({
    regionLevel: testRegionLevel.value,
    selectedRegion: selectedRegionDesc,
    addressParam,
    timestamp: new Date().toLocaleTimeString()
  })
  
  // 只保留最近10条记录
  if (addressResults.value.length > 10) {
    addressResults.value = addressResults.value.slice(0, 10)
  }
  
  // 显示结果
  Taro.showModal({
    title: '地址参数测试结果',
    content: `区域级别：${testRegionLevel.value}\n选择区域：${selectedRegionDesc}\n地址参数：${addressParam}`,
    showCancel: false
  })
}

/**
 * 重置测试
 */
const resetTest = () => {
  testRegionLevel.value = 'city'
  testRegion.value = null
  addressResults.value = []
  
  Taro.showToast({
    title: '测试已重置',
    icon: 'success',
    duration: 1500
  })
}
</script>
